<template>
  <div class="home-container">
    <!-- 轮播图区域 -->
    <div class="carousel-wrapper">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in data.images" :key="item">
          <el-image
            :src="item"
            style="width: 100%; height: 100%"
            fit="cover"
            :preview-src-list="data.images"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 数据表格区域 -->
    <el-table :data="data.datas" style="width: 100%; margin-top: 20px; height: 100%" stripe>
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="120" />
      <el-table-column prop="address" label="Address" width="600" />
      <el-table-column prop="zip" label="Zip" width="120" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">
            Detail
          </el-button>
          <el-button link type="primary" size="small" @click="handleClick2(scope.row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 路由导航按钮区域 -->
    <div class="route-buttons">
      <router-link to="/home">转转</router-link>
      <div>
          <el-button>Default</el-button>
          <el-button type="primary" @click="router.replace('/employee')">employee</el-button>
          <el-button type="success" >replace test</el-button>
          <el-button type="info" >路由</el-button>
          <el-button type="warning" >路由</el-button>
          <el-button type="danger" >home页面</el-button>
      </div>
    </div>
  </div>
</template>
<script  setup>
import { ref, reactive } from 'vue'
import img1 from "@/assets/1.png";
import img2 from "@/assets/2.png";
import img3 from "@/assets/3.png";
import img4 from "@/assets/4.png";
import img5 from "@/assets/5.png";
import router from "@/router/index.js";
import request from "@/utils/request.js";

// 页面响应式数据
const data = reactive({

  images:[img1, img2, img3, img4, img5], // 轮播图图片数组
  currentPage: 1,
  pageSize: 10,
  isVisible: false, // 弹窗显示状态
  row: {}, // 当前选中行数据
  employeeList: [],
});

/**
 * 处理详情按钮点击事件
 * @param {Object} row - 表格行数据
 */
function handleClick(row) {
  console.log('Detail button clicked');
  data.isVisible = true;
  data.row = row; // 存储点击行数据用于弹窗显示
}

/**
 * 处理编辑按钮点击事件
 * @param {Object} row - 表格行数据
 */
function handleClick2(row) {
  console.log('Edit button clicked');
  data.row = row; // 存储点击行数据用于弹窗显示
  data.isVisible = true;
}


</script>

